<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理员登录</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <!-- 国内使用 -->
    <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
    <!-- 若您的主要用户来源于海外，请替换使用下面的js资源 -->
    <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script> -->
</head>
<body>

<form class="layui-form" action="" style="margin: 200px auto;width: 500px">
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="phone" required  lay-verify="required|phone" placeholder="请输入标题" autocomplete="off" class="layui-input" value="13512345678">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-block">
            <input type="password" name="pwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" value="345678">
        </div>
    </div>
    <div class="layui-form-item">
        <div id="your-dom-id" class="nc-container" style="margin-left: 100px;"></div> <!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container-->

        <script type="text/javascript">
            var nc_token = ["FFFF0N000000000093A3", (new Date()).getTime(), Math.random()].join(':');
            var NC_Opt =
                {
                    renderTo: "#your-dom-id",
                    appkey: "FFFF0N000000000093A3",
                    scene: "nc_login",
                    token: nc_token,
                    customWidth: 300,
                    trans:{"key1":"code0"},
                    elementID: ["usernameID"],
                    is_Opt: 0,
                    language: "cn",
                    isEnabled: true,
                    timeout: 3000,
                    times:5,
                    apimap: {
                        // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
                        // 'get_captcha': '//b.com/get_captcha/ver3',
                        // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
                        // 'get_img': '//c.com/get_img',
                        // 'checkcode': '//d.com/captcha/checkcode.jsonp',
                        // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
                        // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
                        // 'umid_serUrl': 'https://g.com/service/um.json'
                    },
                    callback: function (data) {
                        // 当回调时, 让登录按钮外观改为可用, disabled属性置为空
                        var loginBtn = document.getElementById("loginBtn");
                        // 取消禁用的外观样式,只保留layui-btn
                        loginBtn.className = "layui-btn";
                        // 取消disabled属性
                        loginBtn.disabled = null;
                    }
                }
            var nc = new noCaptcha(NC_Opt)
            nc.upLang('cn', {
                _startTEXT: "请按住滑块，拖动到最右边",
                _yesTEXT: "验证通过",
                _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
                _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
            })
        </script>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="loginBtn" class="layui-btn layui-btn-disabled" lay-submit lay-filter="formDemo" disabled="disabled">登录</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


    <script src="../../layui/layui.js"></script>
    <script>
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer   // 弹层
                ,form = layui.form   // 表单对象
                ,$= layui.$

            form.on('submit(formDemo)', function(data){

                //获取表单数据并转换为json字符串
               var jsonString = JSON.stringify(data.field);
               // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

                $.ajax({
                    url:"/admin"
                    ,method:"post"
                    ,headers:{handlerType:"login"}
                    ,data:{formData:jsonString}  // {phone:"",pwd:""}
                   // ,data:{phone:"",pwd:""}
                    ,dataType:"json"
                    ,success:function(res){
                        console.log(res)
                        if(res.code == 1){
                            // 接收后端传递的token,并保存在localStorage
                            /*localStorage:和服务连接时不会携带,永久有效,可以跨页面访问
                            sessionStorage:和服务连接时不会携带,只在当前页面有效,不能长期保存,不能跨页面
                            cookie: 和服务连接时会携带*/
                            localStorage.setItem("token",res.token)
                            // 把管理员姓名保存
                            localStorage.setItem("name",res.data.name);
                            layer.confirm("登录成功", {
                                btn: ['确定'] //可以无限个按钮
                            }, function(index, layero){
                                window.location.href="index.html";
                            });

                            // 当打开index.html, 直接先通过一个ajax发起请求(被filter拦截)
                            // 过滤器访问session,获取token
                            //localStorage.getItem("token")
                        }else{
                            layer.msg(res.msg)
                        }
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });
    </script>
</body>
</html>